<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="button"></button>
</body>

</html>
<script>
  let arr = [2, 5, 7, 6, 3, 24, 5, 7, 8, 5, 3, 2, 2, 5, 7, 8, 6]
  // 获取按钮元素
  var button = document.querySelector("#button")
  // 添加点击事件监听器
  button.addEventListener("click", function () {
    // 点击事件处理代码
    maopao()
    console.log(arr, "arr")
  })
  //从数组的起始位置开始，依次比较相邻两个元素，次序不对就交换位置
  // function maopao () {
  //   const n = arr.length
  //   for (let i = 0; i < n - 1; i++) {
  //     for (let j = 0; j < n - 1; j++) {
  //       if (arr[j] > arr[j + 1]) {
  //         [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
  //       }
  //     }
  //   }
  //   return arr
  // }

  function maopao () {
    let n = arr.length
    for (i = 0; i <n - 1; i++) {
      for (j = 0; j < n - 1; j++) {
        if (arr[j] > arr[j+1]) {
          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]

        }
      }
    }
    return arr
  }
</script>